<template>
  <div class="login-container" ref="vantaRef" style="width: 100%; height: 100vh">
    <div class="login-bg-warp">
      <div class="login-form-warp">
        <div class="login-form" tabindex="0">
          <div class="welcome-title">登  录</div>
          <el-form :model="user" :rules="rules" ref="userFormInst" @keydown.enter="login">
            <el-form-item prop="username" >
              <el-input  placeholder="请输入用户名"  size="medium" prefix-icon="el-icon-user" v-model="user.username" style="margin: 0 0 10px 0"></el-input>
            </el-form-item>
            <el-form-item prop="password" >
              <el-input size="medium" prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="user.password" style="margin:0 0 10px 0"></el-input>
            </el-form-item>

             <el-form-item>
              <div class="verify-code-form-item">
                <el-input placeholder="请输入验证码" size="medium" prefix-icon="el-icon-news" v-model="code"></el-input>
                <span @click="refreshCode">
                  <Identify :identifyCode="identifyCode"></Identify>
                </span>
              </div>
            </el-form-item>


            <el-form-item>
              <el-checkbox v-model="isAllow" class="allow-warp" style="margin: 10px 0 0 0;color:#ffffff">我已阅读同意{{ projectName }}《隐私政策》和《服务条款》</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button class="btn-login" type="primary" size="medium" autocomplete="off"  @click="login">立即登录</el-button>
            </el-form-item>
            <el-form-item>
              <div class="other-warp">
                <div @click="$router.push('/register')">还没有账号，去注册</div>
                <div @click="$router.push('/resetpassword')">找回密码</div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { resetRouter, setRoutes } from '@/router'
import Identify from '@/components/Identify'
import { projectName } from '../../config/config.default'
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑

export default {
  name: 'Login',
  data() {
    return {
      projectName: projectName,
      user: {},
      code: '',
      isAllow: true,
      dialogFormVisible: false,
      // 图片验证码
      identifyCode: '',
      // 验证码规则
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: { Identify },
  mounted() {
    // 重置路由
    resetRouter()
    // this.refreshCode()
    //首页动画效果 在beforeDestroy钩子函数中销毁
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      speedLimit: 4.00,
      scale: 1.0,
      color1: 0xff0000,
      color2: 0xd1ff,
      backgroundColor: 0x2F54EB
    })
    /*每次刷新重新生成验证码*/
    this.refreshCode();


  },
  methods: {
    login() {
      if(this.isAllow===false){
        this.$message({
          type: 'error',
          message: '请勾选同意《隐私政策》和《服务条款》'
        })
        return
      }

      if(!this.code.trim()){
        this.$message({
          type: 'error',
          message: '请输入验证码'
        })
        return
      }else if (this.code !== this.identifyCode.toLowerCase()) {
        this.$message({
          type: 'error',
          message: '验证码错误'
        })
        return
      }
      this.$refs['userFormInst'].validate((valid) => {
        if (valid) {
          // 表单校验合法
          this.request.post('/user/login', this.user).then((res) => {
            if (res.code === '200') {
              localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器
              localStorage.setItem('menus', JSON.stringify(res.data.menus)) // 存储用户信息到浏览器
              // 动态设置当前用户的路由
              setRoutes()
              if (res.data.menus.length===0) {
                this.$router.push('/front/home')
                this.$message.success('登录成功')
              } else {
                this.$router.push('/')
                this.$message.success('登录成功')
              }
            } else {
              this.$message.error(res.msg || '出错啦')
            }
          })
        }
      })
    },

    // 切换验证码
     refreshCode() {
       this.identifyCode = ''
       this.makeCode(this.identifyCodes, 4)
     },
     // 生成随机验证码
     makeCode(o, l) {
       for (let i = 0; i < l; i++) {
         this.identifyCode += this.identifyCodes[Math.floor(Math.random() * this.identifyCodes.length)]
       }
     },
  },
  beforeMount(){
    function refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    }
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  .login-bg-warp {
    width: 100%;
    /*background: url('../assets/login.png') no-repeat;*/
    background-size: cover;
  }
  .login-form-warp {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px ;

    .login-form {
      width: 450px;
      // border: #4084d9 1px solid;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      // background: url('../assets/login.png');
      padding: 25px;
      box-shadow:0 6px 20px 8px rgba(0,0,0,0.2);

      .input{
        background-color: #366ef4;
      }
      .welcome-title {
        font-size: 24px;
        margin-bottom: 30px;
        font-family: Arial, Helvetica, sans-serif;
        color: #f5f5f5;
        text-align: center;
      }
      .verify-code-form-item {
        display: flex;
        align-items: center;
      }
      .allow-warp {
        color: #366ef4;
        display: flex;
        align-items: center;
        font-size: 12px;

      }
      .btn-login {
        width: 100%;
        transition: all 0.3s ease-in-out;
      }
      .btn-login:hover {
        box-shadow: 0 6px 10px rgba(54, 110, 244, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)!important;
      }
      .other-warp {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #366ef4;
        cursor: pointer;
      }
    }
  }
}
</style>
